<!DOCTYPE html>
<html lang="en">
{% extends 'base.html' %}

{% block content %}
    <form class="form-row align-items-center" action="" method="post" enctype="multipart/form-data">
        <div class="input-group">
            {% csrf_token %}
            <div class="custom-file">
                <input type="file" class="custom-file-input" id="inputGroupFile04" name="img">
                <label class="custom-file-label">Choose file</label>
            </div>
            <div class="input-group-append">
                <input class="form-control mr-sm-2" type="submit" value="上传">
            </div>
        </div>
    </form>
    <br>

    {% if img %}
        <div align="center">
            <div class="card" style="width: 48rem;">
                <img src="{{ img.img.url }}" class="img-responsive"
                     style="width: 100%; float: left; margin-right: 10px;"/>
            </div>
        </div>
    {% endif %}
    <br>
    <div class="container">
        <div class="row">
            {% for x in heatmap %}
                <div class="col-sm">
                    <div class="card" style="width: 18rem;">
                        <img class="card-img-top" src="{{ x.url }}" alt="Card image cap">
                        <div class="card-body">
                            <h5 class="card-title">{{ x.name }}</h5>
                        </div>
                    </div>
                    <br>
                </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}